<template>
  <div> 
    <mt-header fixed title="单项赛集体报名">
      <mt-button icon="back" @click='$router.back(-1)' slot="left"></mt-button>
    </mt-header>
    <div style="height:40px;"></div>    
    <div class="top-title"><i class="gray">比赛名称: </i>2019长沙岳麓区第N届羽毛球邀请赛</div>
    <div class="top-title"><i class="gray">比赛组别：</i>青年组 - 20至30岁</div> 
    <step current=4 :stepArr="stepArr"></step>
    <div>
      <div class="cf m10"><span class="fl f16 fwb mt5">选择队员</span><span class="fl f16 mt5">（男双）</span><mt-button size='small' class='fr' @click="addMember" type="danger"><i class="fa fa-plus"></i> 添加</mt-button></div>
      <div  class="team-content">
        <ul class="team-list">
          <li v-for="(item, index) in list">            
            <div class="team-item-num"><i>{{index + 1}}</i></div>
            <div class="team-item-in">
              <div v-for="(obj, n) in item" class="team-item-in-line">
                <div class="team-item-c">
                  <popup-radio style="flex:1; width: 0;" v-model="obj.certType" :options='certList' title="证件类型"></popup-radio>
                  <input style="flex:1;" type="text" v-model="obj.certNo" placeholder="证件号码"> 
                </div>
                <div class="team-item-c">
                  <input style="flex:1;" type="text" v-model="obj.name" placeholder="姓名">
                  <input style="flex:1;" type="text" v-model="obj.size" placeholder="衣码">
                  <input style="flex:2;" type="text" v-model="obj.mobile" placeholder="手机号"> 
                </div>
                <div class="team-item-c">  
                  <popup-age style="flex:1;" title="年龄" v-model="obj.age"></popup-age>
                  <popup-radio style="flex:1;" title="性别" v-model="obj.sex" :options="sexArr"></popup-radio>            
                  <i style="flex:1;" class="team-blue-btn" @click="popupVisible=true">选择队员</i>
                  <i style="flex:1;" class="team-gray-btn">验证</i>
                </div>
              </div>
            </div>
            <div style="background:#ddd; color:#000; display: flex; align-items: center;"  @click="removeMember(index)">
              <div style="padding:7px;">删<br>除</div> 
            </div> 
          </li>
        </ul>
      </div> 
      <div style="display: flex; margin: 10px;">
        <mt-button style="flex:1;" @click='$router.push("/enroll/team/step3")' plain class="mr10" type="primary">上一步</mt-button>
        <mt-button style="flex:1;" @click='$router.push("/enroll/team/step5")' type="primary">下一步</mt-button>
      </div>
    </div>

    <mt-popup v-model="popupVisible" modal=false style="width:100%; height:100%;">
      <div class="pop-page">
        <div class="pop-page-title"><i class="pop-page-title-side fa fa-remove" @click="popupVisible = false"></i><i class="pop-page-title-center">选择队员</i><i class="pop-page-title-side"></i></div>
        <div class="pop-page-content">
          <ul>
            <li v-for="(item, index) in memberList">
              <div @click="memberSel = item.id;" class="d-flex p10">
                <div class="f-auto f14 pl10">
                  {{item.name}}
                </div>
                <div v-if="memberSel == item.id" class="fa fa-dot-circle-o mr20 f18 blue"></div>
                <div v-else class="fa fa-circle-o mr20 f18 gray"></div>
              </div> 
            </li>
          </ul>
        </div>
        <div class="pop-page-bottom"><i class="gray6" @click="popupVisible = false">取消</i><i class="blue" @click="popupVisible = false">确定</i></div>
      </div>
    </mt-popup>

  </div>
</template>

<script>
import step from '@/components/step'
import popupAge from '@/components/popupAge'
import popupRadio from '@/components/popupRadio'
export default {
  components:{
    step,popupAge,popupRadio
  },
  data () {
    return {
      numb:2,
      stepArr:['选择俱乐部','报名人员','选择项目','选择队员','报名预览','支付完成'],
      certList:[{value:"1",name:"身份证"},{value:"2",name:"学生证"},{value:"3",name:"港澳通行证"},{value:"4",name:"护照"}],
      sexArr:[{value:'male',name:'男'},{value:'female',name:'女'}],
      list:[],
      popupVisible:false,
      memberList:[
        { 
          "id":1, 
          "name":"独孤求败"
        },
        { 
          "id":2, 
          "name":"张无忌"
        },
        { 
          "id":3, 
          "name":"李小龙"
        },
        { 
          "id":4, 
          "name":"迈克杰克逊"
        },
        { 
          "id":5, 
          "name":"东方不败"
        }, 
        { 
          "id":6, 
          "name":"灭绝师太"
        }, 
        { 
          "id":7, 
          "name":"天山童姥"
        }, 
        { 
          "id":8, 
          "name":"赤练仙子"
        }, 
        { 
          "id":9, 
          "name":"桃花岛主"
        }, 
        { 
          "id":10, 
          "name":"五毒教主"
        }
      ],
      memberSel:"",
    }
  },
  mounted(){
    var n = 2;
    var arr = [];     
    for (var i = 0; i < n; i++) {
      var a = [];
      for (var j = 0; j < this.numb; j++) {
        a.push({});
      }
      arr.push(a);
    }    
    this.list = arr;
  },
  methods:{
    addMember(){ 
      var arr = [];
      for (var i = 0; i < this.numb; i++) {
        arr.push({});
      }
      this.list.push(arr);  
    },
    removeMember(i){
      this.list.splice(i,1);
    }
  }
}
</script>
